<template>
	<view class="select_shop_box">
		<view class="select_shop_box1">
			<view class="shopItem" v-for="item in shopList">
				<image class="shopItem_image" :src='`http://localhost:15000/fileManager/getImageById?id=` + item.shopLogo' mode=""></image>
				<view style="float:left;margin-left: 10px;">
					<text>{{item.shopName}}</text>
					<br>
					<text style="line-height: 10px;">{{item.createTime}}</text>
					<br>
					<u-switch
						style="float:left;margin-top: 6px;"
						space="2" v-model="item.operationStatus === 1" size="20" activeColor="green"
						inactiveColor="rgb(230, 230, 230)"
						asyncChange
						@change="asyncChange(item.id, item.operationStatus)">
					</u-switch>
					<view v-show="item.operationStatus === 0" style="height: 20px;float:left;margin-left: 10px;margin-top: 6px;">
						<view style="width: 10px;height: 10px;margin-top:6px;;border-radius: 90px;background-color: red;float:left;"></view>
						<text style="float:left;margin-left: 3px;">未营业</text>
					</view>
					<view v-show="item.operationStatus === 1" style="height: 20px;float:left;margin-left: 10px;margin-top: 6px;">
						<view style="width: 10px;height: 10px;margin-top:6px;;border-radius: 90px;background-color: green;float:left;"></view>
						<text style="float:left;margin-left: 3px;">营业中</text>
					</view>
					<u-button style="background-color: #0BAFF5;color: white;" class="openBtn" @click="goHome(item.id)" text="进入"></u-button>
				</view>
			</view>
		</view>
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//  存放店铺信息列表
				shopList: [],
				// 营业状态
				operationStatus: false,
				shopId: '',
			}
		},
		mounted () {
			// 初始化 根据根据用户id获取 名下所有店铺
			this.getShopListByUserId()
		},
		watch: {
			operationStatus(newValue, oldValue) {
			}
		},
		methods: {
			// 去首页
			goHome(shopId){
				uni.setStorageSync('shopId', shopId)
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			// 点击滑块设置营业状态
			asyncChange (shopId, operationStatus) {
				if(operationStatus == 1) {
					operationStatus = 0
				} else {
					operationStatus = 1
				}
				this.$myRequest({
					url: '/shop/editShopStatus',
					data: {
						shopId: shopId,
						status: operationStatus
					}
				}).then(res => {
					if (res.data.flag) {
						this.uNotify('修改成功', 'success')
						this.getShopListByUserId()
					} else {
						this.uNotify('修改失败，请重试', 'warning')
					}
				})
			},
			// 根据用户id获取 名下所有店铺
			getShopListByUserId () {
				this.$myRequest({
					url: '/shop/getShopListByUserId',
					data: {
						userId: uni.getStorageSync('id')
					}
				}).then(res => {
					this.shopList = res.data.obj
				})
			},
			// 定义消息提醒方法
			uNotify(message, type) {
				this.$refs.uNotify.show({
					top: 40,
					type: type,
					message: message,
					duration: 1000 * 3,
					fontSize: 20,
					safeAreaInsetTop:true
				})
			},
		}
	}
</script>

<style scoped>
.select_shop_box {
	width: 100%;
	height: 860px;
	background-color: gainsboro;
	overflow: hidden;
}
.select_shop_box1{
	width: 80%;
	height: 500px;
	margin: 0 auto;
	margin-top: 50px;
}
.shopItem{
	width: 90%;
	height: 80px;
	border: black;
	background-color: white;
	padding: 10px;
	border-radius: 5px;
	margin-top: 15px;
	position: relative;
}
.shopItem_image{
	width: 80px;
	height: 80px;
	float:left;
}
.u-badge_box{
	width: 100px; 
	height: 100px;
	background-color: #909193;
	border-radius: 15px;
}
.openBtn{
	width: 80px;
	position: absolute;
	bottom: 0;
	right: 0;
}
</style>
